HLTech / judge-d-ui

import { DependencyLink, DependencyNode, NodeSelection } from '../../components/types';

import { forceCenter, forceCollide, forceLink, forceSimulation, forceY } from 'd3-force';

import { select, Selection } from 'd3-selection';

import { zoom } from 'd3-zoom';

import { BASE_FONT_SIZE, ElementColors, LabelColors, MAXIMUM_ZOOM_SCALE, MINIMUM_ZOOM_SCALE, ElementIds, TextColors } from '../AppConsts';

import { selectById } from './Selectors';

export function createLinkElements(zoomLayer: NodeSelection<SVGGElement>, links: DependencyLink[]) {

    return zoomLayer

        .append('g')

        .attr('id', ElementIds.LINKS)

        .lower()

        .selectAll<HTMLElement, DependencyLink>('line.link')

        .data(links)

        .enter()

        .append<SVGPathElement>('svg:path')

        .attr('class', 'link')

        .attr('marker-end', 'url(#provider)')

        .style('stroke-width', 1);

}

export function createLabels(labelNodesGroup: NodeSelection<SVGGElement>, nodes: DependencyNode[]) {

    labelNodesGroup

        .selectAll('g')

        .data(nodes)

        .append<SVGPathElement>('svg:path')

        .attr('class', 'label')

        .attr('fill', LabelColors.DEFAULT)

        .attr('d', createLabelPath);

}

export function createTextElements(labelNodesGroup: NodeSelection<SVGGElement>, nodes: DependencyNode[]) {

    return labelNodesGroup

        .selectAll<HTMLElement, DependencyNode>('g#labels')

        .data(nodes)

        .enter()

        .append<SVGGElement>('g')

        .attr('cursor', 'pointer')

        .append('text')

        .attr('text-anchor', 'middle')

        .attr('font-size', BASE_FONT_SIZE)

        .attr('fill', TextColors.DEFAULT)

        .text(d => d.name);

}

export function createSimulation(nodes: DependencyNode[], links: DependencyLink[], width: number, height: number) {

    return forceSimulation(nodes)

        .force(

            'dependency',

            forceLink<DependencyNode, DependencyLink>(links)

                .distance(180)

                .id((node: DependencyNode) => node.name)

        )

        .force('center', forceCenter(width / 2, height / 2))

        .force('y', forceY(0.5))

        .force('collide', forceCollide(140))

        .force('nodeCollide', forceCollide(140));

}

export function createSVGContainer(width: number, height: number) {

    return selectById(ElementIds.OVERVIEW_CONTAINER_DIV)

        .append('svg')

        .attr('id', ElementIds.OVERVIEW_CONTAINER)

        .attr('preserveAspectRatio', 'xMidYMid meet')

        .attr('viewBox', `0 0 ${width} ${height}`)

        .attr('width', width)

        .attr('height', height);

}

export function createZoom(svgContainer: NodeSelection<SVGSVGElement>, selector: ElementIds.OVERVIEW_ZOOM | ElementIds.DETAILS_ZOOM) {

    const zoomLayer = svgContainer.append('g').attr('id', selector);

    svgContainer

        .call(

            zoom<SVGSVGElement, DependencyNode>()

                .scaleExtent([MINIMUM_ZOOM_SCALE, MAXIMUM_ZOOM_SCALE])

                .on(`zoom`, changeZoom(selector))

        )

        .on('dblclick.zoom', null);

    return zoomLayer;

}

export function createLinkPath(this: Element, link: DependencyLink): void {

    if (!link.source.x || !link.source.y || !link.target.x || !link.target.y) {

        return;

    }

    console.log(link);

    const xDiff = link.source.x - link.target.x;

    const yDiff = link.source.y - link.target.y;

    const isSourceOnTheLeft = xDiff < 0;

    const isSourceBelowTarget = yDiff > 0;

    const angleInRadians = Math.abs(Math.atan(yDiff / xDiff));

    const cosinus = Math.cos(angleInRadians);

    const sinus = Math.sin(angleInRadians);

    if (!link.source.width) {

        link.source.width = getNodeDimensions(link.source).width;

    }

    if (!link.target.width) {

        link.target.width = getNodeDimensions(link.target).width;

    }

    const sourceOffsetXLeft = -(20 + (link.source.width || 0) / 2) * cosinus;

    const targetOffsetXLeft = -(20 + (link.target.width || 0) / 2) * cosinus;

    const offsetY = 50 * sinus;

    const offsetYBelow = -offsetY - 5;

    const sourceNewX = isSourceOnTheLeft ? (link.source.width / 2 + 20) * cosinus : sourceOffsetXLeft;

    const sourceNewY = isSourceBelowTarget ? offsetYBelow : offsetY;

    const targetNewX = isSourceOnTheLeft ? targetOffsetXLeft : (link.target.width / 2 + 20) * cosinus;

    const targetNewY = isSourceBelowTarget ? offsetY : offsetYBelow;

    select<Element, DependencyLink>(this)

        .attr(

            'd',

            'M' +

                (link.source.x + sourceNewX) +

                ',' +

                (link.source.y + sourceNewY) +

                ', ' +

                (link.target.x + targetNewX) +

                ',' +

                (link.target.y + targetNewY)

        )

        .attr('stroke', LabelColors.DEFAULT);

}

export function createLabelPath(this: Node, node: DependencyNode) {

    const labelTextDimensions = getLabelTextDimensions(this);

    if (!labelTextDimensions) {

        return '';

    }

    const labelTextWidth = labelTextDimensions.width;

    const { isConsumer, isProvider } = node;

    const xOffset = -labelTextWidth / 2 + 4.5;

    if (isConsumer && isProvider) {

        return (

            'M' +

            xOffset +

            ',35l9.37,14.59L' +

            xOffset +

            ',64.18h' +

            (labelTextWidth + 45) +

            'l9-14.59L' +

            (labelTextWidth / 2 + 49.5) +

            ',35H' +

            xOffset +

            'z'

        );

    }

    if (isProvider) {

        return 'M' + (labelTextWidth / 2 + 49.5) + ',35H' + xOffset + 'l9.37,14.59L' + xOffset + ',64.18h' + (labelTextWidth + 45);

    }

    if (isConsumer) {

        return 'M' + xOffset + ',64.18h' + (labelTextWidth + 45) + 'l9.42-14.59L' + (labelTextWidth / 2 + 49.5) + ',35H' + xOffset + '';

    }

    return 'M' + xOffset + ',64.18h' + (labelTextWidth + 55) + 'L' + (labelTextWidth / 2 + 59.5) + ',35H' + xOffset;

}

export function createHighlightBackground(

    svgContainer: NodeSelection<SVGGElement>

): Selection<SVGRectElement, DependencyNode, Element, HTMLElement> {

    return svgContainer

        .append('rect')

        .attr('id', ElementIds.HIGHLIGHT_BACKGROUND)

        .attr('width', 0)

        .attr('height', 0)

        .attr('x', 0)

        .attr('y', 0)

        .attr('rx', 5)

        .attr('ry', 5)

        .attr('fill', ElementColors.HIGHLIGHT_BACKGROUND)

        .style('opacity', 0);

}

export function createDetailsButton(svgContainer: NodeSelection<SVGGElement>) {

    const detailsButtonWrapper = svgContainer

        .append('g')

        .attr('id', ElementIds.DETAILS_BUTTON)

        .attr('cursor', 'pointer');

    detailsButtonWrapper

        .append('rect')

        .style('opacity', 0)

        .attr('fill', ElementColors.BUTTON);

    detailsButtonWrapper

        .append('text')

        .style('opacity', 0)

        .style('text-anchor', 'middle')

        .attr('fill', TextColors.HIGHLIGHTED)

        .text('Details');

    return detailsButtonWrapper;

}